<template>
    <div id="box">
        <div id="search">
            <el-form :inline="true" :model="logSearch" class="demo-form-inline">
                <el-form-item label="操作人">
                    <el-input v-model="logSearch.searchParams.username" placeholder="请输入操作人"></el-input>
                </el-form-item>
                <el-form-item label="操作地址">
                    <el-input v-model="logSearch.searchParams.ip" placeholder="请输入IP"></el-input>
                </el-form-item>
                <el-form-item label="系统模块">
                    <el-input v-model="logSearch.searchParams.model" placeholder="请输入模块名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="onSearchSubmit">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-share" @click="exportLogSubmit">导出日志</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div id="header-bth">
            <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteLogs">批量删除</el-button>
        </div>

        <div id="log-table">
            <el-table
                    :data="tableData"
                    stripe
                    height="310"
                    @selection-change="handleSelectionChange"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column label="日志编号">
                    <template slot-scope="scope">
                        <span style="margin-left: 20px">{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="系统模块" width="180px">
                    <template slot-scope="scope">
                        <span style="margin-left: 20px">{{ scope.row.model }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作类型">
                    <template slot-scope="scope">
                        <span>{{ scope.row.description }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作人员">
                    <template slot-scope="scope">
                        <span>{{ scope.row.username }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作地址" width="150px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.ip }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作参数" width="200px" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ scope.row.params }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="资源路径" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ scope.row.url }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="耗时(ms)">
                    <template slot-scope="scope">
                        <span>{{ scope.row.timeConsuming }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作日期" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.createTime }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="nav-page">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="pageSizes"
                    :page-size="logSearch.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>

import * as logs from '@/api/logs'
import fileDownload from "js-file-download";

export default {
    name: "OperationLogView",
    data() {
        return {
            tableData: [],
            pageSizes: [5, 10, 15],
            total: 20,
            logSearch: {
                limit: 5,
                page: 1,
                searchParams: {
                    username: '',
                    ip: '',
                    model: ''
                }
            },
            /*复选框数据*/
            multipleSelection: []
        }
    },
    methods: {
        // 导出系统日志
        exportLogSubmit() {
            let username = this.logSearch.searchParams.username
            let ip = this.logSearch.searchParams.ip
            let model = this.logSearch.searchParams.model
            // 导出日志
            logs.exportLogs({username, ip, model})
                .then(res=>{
                    fileDownload(res,new Date().getTime()+".xlsx")
                })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val.map(row => row.id)
        },
        // 批量删除
        deleteLogs() {
            if (this.multipleSelection.length == 0) {
                this.$message.warning("请至少选择一条数据")
                return
            }
            // 发送异步请求删除数据
            let ids = this.multipleSelection;
            logs.deleteLogs(ids).then(res => {
                if (res.code == 0) {
                    this.$notify.success(res.message)
                }
                this.list()
            })
        },
        //切换每页显示条数
        handleSizeChange(val) {
            this.logSearch.limit = val
            this.list()
        },
        // 切换页码
        handleCurrentChange(val) {
            this.logSearch.page = val
            this.list()
        },
        // 搜索
        onSearchSubmit() {
            this.logSearch.page = 1
            this.list()
        },
        list() {
            logs.logsPage(this.logSearch).then(res => {
                if (res.code == 0) {
                    let {total, tableData} = res.data
                    this.total = total
                    this.tableData = tableData
                }
            })
        }
    },
    created() {
        this.list()
    }
}
</script>

<style scoped>

#box {
    width: 95%;
    margin: 5px auto 0;
}

#search {
    margin-top: 40px;
    padding: 5px;
    border-bottom: 1px solid #eee;
}

#header-bth {
    margin-top: 20px;
    margin-bottom: 20px;
}


#nav-page {
    margin-top: 15px;
    margin-bottom: 30px;
}

.el-button {
    margin-left: 5px;
    margin-right: 5px;
}
</style>

